<template>
  <div class="user_panel_list">
    <div class="user_panel">
      <router-link class="u_link" :to="'/PersonView/' + user_id">
        <div class="user_av">
          <img :src="user_img" alt="" />
        </div>
      </router-link>
      <div class="user_p">
        <!-- 用户信息 -->
        <div class="user_acc_p">
          <router-link class="u_link" :to="'/PersonView/' + user_id">
            <!-- 用户名账号 -->
            <div class="user_na">
              <div class="name_banner">
                <div class="user_nick">{{ user_nickname }}</div>
                <!-- 用户认证 -->
                <div v-if="auth_id == 1" class="auth personal">
                  <svg viewBox="0 0 22 22">
                    <g>
                      <path
                        d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"
                      ></path>
                    </g>
                  </svg>
                </div>
                <div v-if="auth_id == 2" class="auth organizaion">
                  <svg viewBox="0 0 22 22">
                    <g>
                      <path
                        d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"
                      ></path>
                    </g>
                  </svg>
                </div>
                <!-- 用户认证结束 -->
              </div>
              <div class="user_acc">@{{ username }}</div>
            </div>
          </router-link>
          <!-- 如果关注的是当前用户 则当前用户不能关注自己 -->
          <div v-if="user_id == userForm.current_user_id">
            <!-- 关注按钮 -->
            <div class="user_opr">
              <button class="el_btn">{{ $t("fanslist.btn.follower") }}</button>
            </div>
          </div>
          <div v-else>
            <!-- 关注按钮 -->
            <div class="user_opr">
              <div v-if="is_fo == 1 || is_fo == 2">
                <button class="el_btn selected" @click="cancelfoUser">
                  {{ $t("fanslist.btn.following") }}
                </button>
              </div>
              <div v-else>
                <button class="el_btn" @click="foUser">
                  {{ $t("fanslist.btn.follow") }}
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- 用户介绍 -->
        <router-link class="u_link" :to="'/PersonView/' + user_id">
          <div class="user_info">
            {{ user_info }}
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "YouFansListItemComponents",
  props: {
    userData: Object,
    msg: String,
  },
  data() {
    return {
      user_id: this.userData.user_id ? this.userData.user_id : 1,
      auth_id: this.userData.auth_id ? this.userData.auth_id : 0,
      user_img: this.userData.user_headimg
        ? this.userData.user_headimg
        : require("@/assets/img/user.png"),
      user_nickname: this.userData.user_nickname
        ? this.userData.user_nickname
        : "昵称",
      username: this.userData.username ? this.userData.username : "账号",
      user_info: this.userData.user_info ? this.userData.user_info : "",
      is_fo: 0, //是否关注
      fo_buttonText: "关注",
      userForm: {
        post_user_id: this.userData.user_id ? this.userData.user_id : 1,
        current_user_id: JSON.parse(localStorage.getItem("user")).user_id
          ? JSON.parse(localStorage.getItem("user")).user_id
          : 1,
      }, //判断当前用户是否关注该用户
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.getIsFoByCurrentUserId();
    },
    //查询当前用户是否关注了当前发帖人
    async getIsFoByCurrentUserId() {
      let res = await this.$http.post("getIsFoByCurrentUserId", this.userForm);

      if (res.state == 200) {
        this.is_fo = res.data;
      }
    },
    //点击关注
    async foUser() {
      let res = await this.$http.post("addUserFoPostUser", this.userForm);
      if (res.state == 200) {
        this.$emit("reloadDataList");
        this.$message({
          message: res.message,
          type: "success",
        });
      } else {
        this.$message.error(res.message);
      }
    },
    //取消关注
    async cancelfoUser() {
      let res = await this.$http.post("cancelUserFoPostUser", this.userForm);
      if (res.state == 200) {
        this.$emit("reloadDataList");
        this.$message({
          message: res.message,
          type: "success",
        });
      } else {
        this.$message.error(res.message);
      }
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.user_panel_list {
  display: flex;
  padding: 0 16px;
  border-bottom: 1px solid rgb(239, 243, 244);
}
.user_panel {
  display: flex;
  max-width: 568px;
  width: 100%;
  margin: 16px 0;
}

.user_av {
  display: flex;
  width: 52px;
  height: 52px;
  margin-right: 16px;
}

.user_av img {
  border-radius: 50%;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
}

.user_p {
  width: 100%;
}

.user_acc_p {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex: 1;
}
.name_banner {
  display: flex;
}
.user_nick {
  display: flex;
  font-size: 16px;
  font-weight: 700;
  margin: 5px 0;
}

.user_acc {
  display: flex;
  font-size: 16px;
  color: #939393;
}

.u_link {
  color: rgb(0, 0, 0);
}

.el_btn {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 9px 18px;
  font-size: 14px;
  border-radius: 20px;
}

.el_btn:hover {
  color: rgb(64, 158, 255);
  border: 1px solid rgb(64, 158, 255);
  background: rgba(64, 158, 255, 0.1);
}

.selected {
  color: rgb(255, 255, 255);
  border: 1px solid rgb(64, 158, 255);
  background: rgba(64, 158, 255, 1);
}

.user_info {
  display: flex;
  width: 100%;
  flex: 1;
  margin-top: 15px;
}

.auth {
  width: 20px;
  height: 20px;
  fill: rgba(29, 155, 240, 0);
  cursor: pointer;
  margin-right: 5px;
}

.personal {
  fill: rgba(29, 155, 240, 1);
}

.organizaion {
  fill: rgba(255, 215, 0, 1);
}
</style>